<div class="container" style="padding-bottom: 30px; padding-top: 30px;">
	<h2>Learn</h2>
	<p>This page provides step by step tutorials for learning how to use nanoStudio, these tutorials will guide you through the editor tools and explain how they can be used to create dynamic web experiences in 3D.</p>
	<p>For documentation about the nunuStudio scripting API check the <a class="underline" href="docs/index.html">API Documentation</a> page.</p>
</div>

<div class="container">
	<div *ngFor="let section of this.sections" style="padding-bottom: 30px; padding-top: 30px;">
		<h2>{{section.title}}</h2>
		<p>{{section.description}}</p>
		<div class="row">
			<div *ngFor="let option of section.options" routerLink="{{option.url}}" style="cursor: pointer; border-top: 5px;" class="col-md-3">
				<h4>{{option.title}}</h4>
				<p>{{option.description}}</p>
				<img style="border-radius:5px; width:100%;" src="{{option.image}}"/>
			</div>
		</div>
	</div>
</div>
